 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>api编辑</title>
    {include file="public/head"}
    <style>
    </style>
</head>
<body>
<div class="box">
    <form class="layui-form" action="" id="before">
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="red"> * </span>API</label>
            <div class="layui-input-block">
                <input type="text" name="url" required  lay-verify="required" placeholder="请输入接口url" autocomplete="off" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="red"> * </span>名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入接口主要功能" autocomplete="off" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="red"> * </span>所属组</label>
            <div class="layui-input-block">
                <select name="group" id="group" lay-filter="aihao">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="red"> * </span>请求方式</label>
            <div class="layui-input-block">
                <input type="radio" name="request" value="0" title="不限" id="request_0">
                <input type="radio" name="request" value="1" title="GET" id="request_1">
                <input type="radio" name="request" value="2" title="POST" id="request_2">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="red"> * </span>是否入参</label>
            <div class="layui-input-block">
                <input type="radio" name="param" value="0" title="无参数" lay-filter="paramNo" id="paramNo" >
                <input type="radio" name="param" value="1" title="有参数" lay-filter="paramYes" id="paramYes" >
            </div>
        </div>
        <div id="paramBox">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">入参说明</label>
            <div class="layui-input-block">
                <input type="text" name="param_explain" placeholder="请输入入参说明" autocomplete="off" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">结果示例</label>
            <div class="layui-input-block">
                <textarea name="result_text" id="result_text" placeholder="请输入返回结果示例" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="red"> * </span>是否出参</label>
            <div class="layui-input-block">
                <input type="radio" name="result" value="0" id="resultNo" title="不填写" lay-filter="resultNo">
                <input type="radio" name="result" value="1" id="resultYes" title="填写" lay-filter="resultYes">
            </div>
        </div>
        <div id="resultBox">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">结果描述</label>
            <div class="layui-input-block">
                <input type="text" name="result_explain"  placeholder="请输入返回结果的简单描述" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="red"> * </span>排序</label>
            <div class="layui-input-block">
                <input type="text" name="sort" required  lay-verify="number" placeholder="请输入接口主要功能" autocomplete="off" class="layui-input" value="0">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="red"> * </span>状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" value="1" lay-text="ON|OFF" lay-skin="switch" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <button class="layui-btn" lay-submit lay-filter="apiEdit">提交</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="window.history.go(-1);">返回</button>
            </div>
        </div>
    </form>
</div>

</body>

<script>
    var form;
    var layer;
    var paramYesOrNo = 0;//是否有入参
    var resultYesOrNo = 0;//是否有入参
    var paramNum = 0;//入参计数
    var resultNum = 0;//出参计数

    layui.use(['form','layer'], function(){
        form = layui.form;
        layer=layui.layer;
        $.ajax({
            type:'POST',
            url:'/admin/api/getGroupList',
            data:{},
            success:function(data){
                console.log(data);
                if(data.data){
                    let html = '';
                    let list = data.data;
                    list.forEach(function(item,index){
                        html += '<option value="'+item["id"]+'">'+item["name"]+'</option>'
                    });
                    $("#group").html(html);
                    form.render('select');
                }else{
                    layer.msg('暂无可用分组', {icon: 5});
                }
                return false;
            }
        });

        $.ajax({
            type:'POST',
            url:'/admin/api/api_edit_data',
            data:{id:'{$id}'},
            success:function(data){
                console.log(data);
                if(data.code === 0){
                    let vo = data.data;
                    $("[name='id']").val(vo.id);
                    $("[name='url']").val(vo.url);
                    $("[name='name']").val(vo.name);
                    $("[name='group']").val(vo.group_id);
                    $("#request_"+vo.requestData).attr("checked","checked");
                    if(vo.paramNum > 0){
                        $("#paramYes").attr("checked","checked");
                        let paramList = vo.param;
                        paramList.forEach(function(item,index){
                            paramYesOrNo = 1;
                            editParamHtml('param_',index,item);
                            paramNum ++;
                        });
                    }else{
                        $("#paramNo").attr("checked","checked");
                    }
                    if(vo.resultNum > 0){
                        $("#resultYes").attr("checked","checked");
                        let resultList = vo.result;
                        resultList.forEach(function(item,index){
                            resultYesOrNo = 1;
                            editResultHtml('result_',index,item);
                            resultNum ++;
                        });
                    }else{
                        $("#resultNo").attr("checked","checked");
                    }
                    $("[name='param_explain']").val(vo.param_explain);
                    $("[name='result_explain']").val(vo.result_explain);
                    $("[name='result_text']").val(vo.result_text);
                    $("[name='sort']").val(vo.sort);
                    if(vo.status === 0){
                        $("[name='status']").removeClass("checked");
                    }
                    form.render();
                }else{
                    layer.msg('数据错误', {icon: 5});
                }
                return false;
            }
        });

        form.on('radio(paramYes)', function(data){
            if(paramYesOrNo === 0){
                paramNum = 0;
                paramYesOrNo = 1;
                $("#paramBox").html(joinParamHtml('param_',paramNum));
                form.render('select');
                paramNum++;
            }
        });

        form.on('radio(paramNo)', function(data){
            if(paramYesOrNo === 1){
                $("#paramBox").html('');
                paramNum = 0;
                paramYesOrNo = 0;
            }
        });

        form.on('radio(resultYes)', function(data){
            if(resultYesOrNo === 0){
                resultNum = 0;
                resultYesOrNo = 1;
                $("#resultBox").html(joinResultHtml('result_',resultNum));
                form.render('select');
                resultNum++;
            }
        });

        form.on('radio(resultNo)', function(data){
            if(resultYesOrNo === 1){
                $("#resultBox").html('');
                resultNum = 0;
                resultYesOrNo = 0;
            }
        });

        form.on('submit(apiEdit)', function(data){
            $.ajax({
                type:'POST',
                url:'/admin/api/api_edit_do',
                data:data.field,
                success:function(data){
                    console.log(data);
                    if(data.code === 0){
                        layer.msg('操作成功', {
                            icon: 1,
                            time:2000
                        },function(){
                            layer.closeAll();
                            window.location.href='/admin/api/index';
                        });
                    }else{
                        layer.msg('操作失败', {icon: 5});
                    }
                    return false;
                }
            });
            return false;
        });
    });

    function editParamHtml(classes,num,item){
        let html = '<div class="layui-form-item '+classes+'" id="'+classes+num+'">\n' +
            '                <label class="layui-form-label">参数</label>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <input type="text" name="param['+num+'][param_name]" required lay-verify="required" placeholder="name" autocomplete="off" class="layui-input" value="'+item.param+'">\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <select name="param['+num+'][param_type]" id="param_type_'+num+'">\n' +
            '                        <option value="String">String</option>\n' +
            '                        <option value="Long">Long</option>\n' +
            '                        <option value="Integer">Integer</option>\n' +
            '                        <option value="Short">Short</option>\n' +
            '                        <option value="Byte">Byte</option>\n' +
            '                        <option value="Float">Float</option>\n' +
            '                        <option value="Double">Double</option>\n' +
            '                        <option value="BigDecimal">BigDecimal</option>\n' +
            '                        <option value="Boolean">Boolean</option>\n' +
            '                        <option value="Json">Json</option>\n' +
            '                        <option value="其他">其他</option>\n' +
            '                    </select>\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <select name="param['+num+'][must]" id="param_must_'+num+'">\n' +
            '                        <option value="1">必须</option>\n' +
            '                        <option value="0">非必须</option>\n' +
            '                    </select>\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <input type="text" name="param['+num+'][explain]"  placeholder="参数说明" autocomplete="off" class="layui-input" value="'+item.explain+'">\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline param_line_button">\n' +
            '                    <div class="layui-btn-group">\n' +
            '                        <button class="layui-btn layui-btn-primary" type="button" data-classes="'+classes+'" data-num="'+num+'" onclick="param_line_subtract(this)">\n' +
            '                            <i class="layui-icon">&#xe640;</i>\n' +
            '                        </button>\n' +
            '                        <button class="layui-btn layui-btn-primary" id="line_add_button" type="button" onclick="param_line_add()">\n' +
            '                            <i class="layui-icon">&#xe654;</i>\n' +
            '                        </button>\n' +
            '                    </div>\n' +
            '                </div>\n' +
            '            </div>';
        $("#line_add_button").remove();
        $("#paramBox").append(html);
        $("#param_type_"+num).val(item.filed_type);
        $("#param_must_"+num).val(item.must);
    }

    function editResultHtml(classes,num,item){
        let html = '<div class="layui-form-item '+classes+'" id="'+classes+num+'">\n' +
            '                <label class="layui-form-label">参数</label>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <input type="text" name="result['+num+'][param_name]" required lay-verify="required" placeholder="name" autocomplete="off" class="layui-input" value="'+item.param+'">\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <select name="result['+num+'][param_type]" id="result_type_'+num+'">\n' +
            '                        <option value="String">String</option>\n' +
            '                        <option value="Long">Long</option>\n' +
            '                        <option value="Integer">Integer</option>\n' +
            '                        <option value="Short">Short</option>\n' +
            '                        <option value="Byte">Byte</option>\n' +
            '                        <option value="Float">Float</option>\n' +
            '                        <option value="Double">Double</option>\n' +
            '                        <option value="BigDecimal">BigDecimal</option>\n' +
            '                        <option value="Boolean">Boolean</option>\n' +
            '                        <option value="Json">Json</option>\n' +
            '                        <option value="其他">其他</option>\n' +
            '                    </select>\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <select name="result['+num+'][must]" id="result_must_'+num+'">\n' +
            '                        <option value="1">必须</option>\n' +
            '                        <option value="0">非必须</option>\n' +
            '                    </select>\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <input type="text" name="result['+num+'][explain]"  placeholder="参数说明" autocomplete="off" class="layui-input" value="'+item.explain+'">\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline result_line_button">\n' +
            '                    <div class="layui-btn-group">\n' +
            '                        <button class="layui-btn layui-btn-primary" type="button" data-classes="'+classes+'" data-num="'+num+'" onclick="result_line_subtract(this)">\n' +
            '                            <i class="layui-icon">&#xe640;</i>\n' +
            '                        </button>\n' +
            '                        <button class="layui-btn layui-btn-primary" id="line_add_button_result" type="button" onclick="result_line_add()">\n' +
            '                            <i class="layui-icon">&#xe654;</i>\n' +
            '                        </button>\n' +
            '                    </div>\n' +
            '                </div>\n' +
            '            </div>';
        $("#line_add_button_result").remove();
        $("#resultBox").append(html);
        $("#result_type_"+num).val(item.filed_type);
        $("#result_must_"+num).val(item.must);
    }


    function joinParamHtml(classes,num){
        return '<div class="layui-form-item '+classes+'" id="'+classes+num+'">\n' +
            '                <label class="layui-form-label">参数</label>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <input type="text" name="param['+num+'][param_name]" required lay-verify="required" placeholder="name" autocomplete="off" class="layui-input">\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <select name="param['+num+'][param_type]">\n' +
            '                        <option value="String">String</option>\n' +
            '                        <option value="Long">Long</option>\n' +
            '                        <option value="Integer">Integer</option>\n' +
            '                        <option value="Short">Short</option>\n' +
            '                        <option value="Byte">Byte</option>\n' +
            '                        <option value="Float">Float</option>\n' +
            '                        <option value="Double">Double</option>\n' +
            '                        <option value="BigDecimal">BigDecimal</option>\n' +
            '                        <option value="Boolean">Boolean</option>\n' +
            '                        <option value="Json">Json</option>\n' +
            '                        <option value="其他">其他</option>\n' +
            '                    </select>\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <select name="param['+num+'][must]">\n' +
            '                        <option value="1">必须</option>\n' +
            '                        <option value="0">非必须</option>\n' +
            '                    </select>\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <input type="text" name="param['+num+'][explain]"  placeholder="参数说明" autocomplete="off" class="layui-input">\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline param_line_button">\n' +
            '                    <div class="layui-btn-group">\n' +
            '                        <button class="layui-btn layui-btn-primary" type="button" data-classes="'+classes+'" data-num="'+num+'" onclick="param_line_subtract(this)">\n' +
            '                            <i class="layui-icon">&#xe640;</i>\n' +
            '                        </button>\n' +
            '                        <button class="layui-btn layui-btn-primary" id="line_add_button" type="button" onclick="param_line_add()">\n' +
            '                            <i class="layui-icon">&#xe654;</i>\n' +
            '                        </button>\n' +
            '                    </div>\n' +
            '                </div>\n' +
            '            </div>';
    }

    function joinResultHtml(classes,num){
        return '<div class="layui-form-item '+classes+'" id="'+classes+num+'">\n' +
            '                <label class="layui-form-label">参数</label>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <input type="text" name="result['+num+'][param_name]" required lay-verify="required" placeholder="name" autocomplete="off" class="layui-input">\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <select name="result['+num+'][param_type]">\n' +
            '                        <option value="String">String</option>\n' +
            '                        <option value="Long">Long</option>\n' +
            '                        <option value="Integer">Integer</option>\n' +
            '                        <option value="Short">Short</option>\n' +
            '                        <option value="Byte">Byte</option>\n' +
            '                        <option value="Float">Float</option>\n' +
            '                        <option value="Double">Double</option>\n' +
            '                        <option value="BigDecimal">BigDecimal</option>\n' +
            '                        <option value="Boolean">Boolean</option>\n' +
            '                        <option value="Json">Json</option>\n' +
            '                        <option value="其他">其他</option>\n' +
            '                    </select>\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <select name="result['+num+'][must]">\n' +
            '                        <option value="1">必须</option>\n' +
            '                        <option value="0">非必须</option>\n' +
            '                    </select>\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline">\n' +
            '                    <input type="text" name="result['+num+'][explain]"  placeholder="参数说明" autocomplete="off" class="layui-input">\n' +
            '                </div>\n' +
            '                <div class="layui-input-inline result_line_button">\n' +
            '                    <div class="layui-btn-group">\n' +
            '                        <button class="layui-btn layui-btn-primary" type="button" data-classes="'+classes+'" data-num="'+num+'" onclick="result_line_subtract(this)">\n' +
            '                            <i class="layui-icon">&#xe640;</i>\n' +
            '                        </button>\n' +
            '                        <button class="layui-btn layui-btn-primary" id="line_add_button_result" type="button" onclick="result_line_add()">\n' +
            '                            <i class="layui-icon">&#xe654;</i>\n' +
            '                        </button>\n' +
            '                    </div>\n' +
            '                </div>\n' +
            '            </div>';
    }

    //增加一行入参
    function param_line_add(){
        $("#line_add_button").remove();
        $("#paramBox").append(joinParamHtml('param_',paramNum));
        form.render('select');
        paramNum++;
    }
    //增加一行出参
    function result_line_add(){
        $("#line_add_button_result").remove();
        $("#resultBox").append(joinResultHtml('result_',resultNum));
        form.render('select');
        resultNum++;
    }

    //删除一行入参
    function param_line_subtract(self){
        let action = $(self);
        let classes = action.data("classes");
        let num = action.data("num");
        let len = $('.'+classes).length;
        let prevLen = $("#"+classes+num).prevAll().length;
        if(len <= 1){
            //参数行删除完自动切换为无参数
            $("#paramNo").click();
            paramYesOrNo = 0;
            form.render('radio');
        }else if(prevLen+1 === len){
            //删除最后一个参数行
            let html = $("#line_add_button");
            let btnGroup = action.parent().parent().parent().prev().find(".layui-btn-group");
            btnGroup.append(html);
        }

        $("#"+classes+num).remove();
    }

    //删除一行出参
    function result_line_subtract(self){
        let action = $(self);
        let classes = action.data("classes");
        let num = action.data("num");
        let len = $('.'+classes).length;
        let prevLen = $("#"+classes+num).prevAll().length;
        console.log(prevLen+'-----'+len);
        if(len <= 1){
            //参数行删除完自动切换为无参数
            $("#resultNo").click();
            resultYesOrNo = 0;
            form.render('radio');
        }else if(prevLen+1 === len){
            //删除最后一个参数行
            let html = $("#line_add_button_result");
            let btnGroup = action.parent().parent().parent().prev().find(".layui-btn-group");
            btnGroup.append(html);
        }

        $("#"+classes+num).remove();
    }

</script>
</html>